import React from 'react';
import { sortable } from 'react-sortable';
import { Icon } from 'antd';


class Item extends React.Component {
  render() {
    return (
      <div className="aimg" {...this.props}>
        {this.props.children}
      </div>
    )
  }
}

var SortableItem = sortable(Item);

/**
 * 相册九宫格
 */
class SortableList extends React.Component {

  state = {
    items: this.props.items || [],
  };

  shouldComponentUpdate(props) {
    if (this.state.items.length != props.items.length) {
      this.setState({
        items: props.items
      })

      return true
    }
    return false
  }

  onSortItems = items => {
    this.setState({
      items,
    });
  }
  
  render() {
    const { items } = this.state;
    var listItems = items.map((item, i) => {
      return (
        <SortableItem
          key={i}
          onSortItems={this.onSortItems}
          items={items}
          sortId={i}>{item}</SortableItem>
      );
    });

    return (
      <div className='sortable-list'>
        {listItems}
        <div className="uploadDiv" onClick={() => { this.props.upload ? this.props.upload() : null }}>
          <Icon type="plus" />
        </div>
      </div>
    )
  }
}

module.exports = SortableList
